<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>图床</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon"/>
    <link href="/static/zui/css/zui.min.css" rel="stylesheet">
    <link href="/static/zui/theme/zui-theme-green.css" rel="stylesheet">
    <script src="/static/zui/lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="/static/zui/js/zui.min.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/zui/lib/ieonly/html5shiv.js"></script>
    <script src="/static/zui/lib/ieonly/respond.js"></script>
    <script src="/static/zui/lib/ieonly/excanvas.js"></script>
    <![endif]-->
</head>
<body class="container">
<div class="page-header">
    <div class="collapse navbar-collapse navbar-collapse-EasyImage">
        <ul class="nav nav-pills">
            <li><a href="/"><i class="icon icon-home"></i> 首页</a></li>
            <li><a href="/list"><i class="icon icon-th"></i> 广场
                <span class="label label-badge label-primary" style="padding-top: 8px;">今日0</span></a></li>
            <li><a href="/history"><i class="icon icon-history"></i> 历史<span
                    class="label label-badge label-primary"></span></a></li>
            <li class="nav navbar-nav navbar-right hidden-xs"><a href="/admin/index.php"><i class="icon icon-user">
                登录</i></a></li>
        </ul>
    </div>
    <div class="col-md-12">
        <div id='upShowID' class="uploader col-md-12 clo-xs-12" data-ride="uploader" data-url="/app/upload.php">
            <div class="uploader-message text-center">
                <div class="content"></div>
                <button type="button" class="close">x</button>
            </div>
            <div class="uploader-files file-list file-list-lg file-rename-by-click"
                 data-drag-placeholder="选择文件/Ctrl+V粘贴/拖拽至此处" style="min-height: 188px; border-style: dashed;"></div>
            <div class="uploader-actions">
                <button type="button" class="btn btn-link uploader-btn-browse"><i class="icon icon-plus"></i> 选择文件
                </button>
                <button type="button" class="btn btn-link uploader-btn-start"><i class="icon icon-cloud-upload"></i>
                    开始上传
                </button>
                <button type="button" class="btn btn-link uploader-btn-stop"><i class="icon icon-pause"></i> 暂停上传
                </button>
                <div class="uploader-status pull-right text-muted hidden-xs"></div>
                <div class="uploader-status pull-right text-muted col-xs-12 text-ellipsis visible-xs"></div>
            </div>
        </div>
        <div class="col-md-12 clo-xs-12">
            <ul class="nav nav-tabs">
                <li data-toggle="tooltip" title="图片直链">
                    <a href="#" data-target="#tab2Content1" data-toggle="tab"><i class="icon icon-picture"></i></a>
                </li>
                <li data-toggle="tooltip" title="论坛代码">
                    <a href="#" data-target="#tab2Content2" data-toggle="tab"><i class="icon icon-chat"></i></a>
                </li>
                <li class="active" data-toggle="tooltip" title="Markdown">
                    <a href="#" data-target="#tab2Content3" data-toggle="tab"><i class="icon icon-code"></i></a>
                </li>
                <li data-toggle="tooltip" title="HTML链接">
                    <a href="#" data-target="#tab2Content4" data-toggle="tab"><i class="icon icon-html5"></i></a>
                </li>
                <li data-toggle="tooltip" title="缩略图">
                    <a href="#" data-target="#tab2Content5" data-toggle="tab"><i class="icon icon-camera"></i></a>
                </li>
                <li data-toggle="tooltip" title="删除链接">
                    <a href="#" data-target="#tab2Content6" data-toggle="tab"><i class="icon icon-trash"></i></a>
                </li>
            </ul>
            <div class="tab-content" style="text-align:right;">
                <div class="tab-pane fade " id="tab2Content1">
                    <textarea class="form-control" rows="5" id="links" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnLinks" class="btn btn-primary copyBtn1" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
                <div class="tab-pane fade " id="tab2Content2">
                    <textarea class="form-control" rows="5" id="bbscode" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnBbscode" class="btn btn-primary copyBtn2" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
                <div class="tab-pane fade active in" id="tab2Content3">
                    <textarea class="form-control" rows="5" id="markdown" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnMarkDown" class="btn btn-primary copyBtn3" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
                <div class="tab-pane fade " id="tab2Content4">
                    <textarea class="form-control" rows="5" id="html" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnHtml" class="btn btn-primary copyBtn4" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
                <div class="tab-pane fade " id="tab2Content5">
                    <textarea class="form-control" rows="5" id="thumb" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnThumb" class="btn btn-primary copyBtn5" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
                <div class="tab-pane fade " id="tab2Content6">
                    <textarea class="form-control" rows="5" id="del" readonly></textarea>
                    <button class="btn btn-primary" style="margin-top:10px;" onclick="location.reload()"><i
                            class="icon icon-undo"></i> 刷新网页
                    </button>
                    <button id="btnDel" class="btn btn-primary copyBtn6" data-loading-text="已经复制链接..."
                            style="margin-top:10px;"><i class="icon icon-copy"></i> 复制
                    </button>
                </div>
            </div>
        </div>
    </div>
    <link href="/static/marquee/marquee.css" rel="stylesheet">
    <link href="/static/zui/lib/uploader/zui.uploader.min.css" rel="stylesheet">
    <script src="/static/zui/lib/uploader/zui.uploader.min.js"></script>
    <script src="/static/marquee/marquee.min.js"></script>
    <script src="/static/index.js"></script>
    <script>
        // 上传控制
        $('#upShowID').uploader({
            // 自动上传
            autoUpload: false,
            // 文件上传提交地址
            url: '/upload',
            // 最大支持的上传文件
            max_file_size: 25165824,
            // 分片上传 0为不分片 分片容易使图片上传失败
            chunk_size: 0,
            // 点击文件列表上传文件
            browseByClickList: true,
            // flash 上传组件地址
            flash_swf_url: '/static/zui/lib/uploader/Moxie.swf',
            // silverlight 上传组件地址
            flash_swf_url: '/static/zui/lib/uploader/Moxie.xap',
            // sign
            multipart_params: {
                'sign': Date.now() / 1000,
            },
            // 预览图尺寸
            previewImageSize: {
                'width': 80,
                'height': 80
            },
            // 上传格式过滤
            filters: { // 只允许上传图片或图标（.ico）
                mime_types: [{
                    title: '图片',
                    extensions: 'jpg,jpeg,png,gif,bmp,webp,ico,jfif,tif,tga'
                },
                    {
                        title: '图标',
                        extensions: 'ico'
                    }
                ],
                prevent_duplicates: true
            },
            // 限制文件上传数目
            limitFilesCount: 30,
            // 重置上传失败的文件
            autoResetFails: true,
            file_data_name: 'file',
            responseHandler: function (responseObject, file) {
                var obj = JSON.parse(responseObject.response); //由JSON字符串转换为JSON对象

                if (obj.result === 'success') {
                    document.getElementById("links").innerHTML += obj.url + "\r\n";
                    document.getElementById("bbscode").innerHTML += "[img]" + obj.url + "[/img]\r\n";
                    document.getElementById("markdown").innerHTML += "![" + obj.srcName + "](" + obj.url + ")\r\n";
                    document.getElementById("html").innerHTML += '<img src="' + obj.url + '" alt="' + obj.srcName + '" />\r\n';
                    document.getElementById("thumb").innerHTML += obj.thumb + "\r\n";
                    document.getElementById("del").innerHTML += obj.del + "\r\n";

                    new $.zui.Messager(obj.srcName + "上传成功", {
                        type: "primary", // 定义颜色主题
                        placement: 'bottom-right',
                        icon: "check" // 定义消息图标
                    }).show();
                } else {
                    return '上传失败,错误信息:' + obj.message;
                }

                try { // 储存上传历史
                    console.log('localStorage ok!');
                    $.zui.store.set(obj.srcName, obj)
                } catch (err) {
                    console.log('localStorage failed:' + err);
                }
            }
        });
    </script>
    <footer class="container text-muted small navbar-fixed-bottom"
            style="text-align: center;background-color:rgba(255,255,255,0.7);z-index: 0;">
        <hr>
        <p>
            <a id="dark" data-toggle="tooltip" title="暗黑模式"><i class="icon icon-lightbulb" id="dark_ico"></i></a>
            <a href="/admin/index.php" data-toggle="tooltip" title="账号登录"><i class="icon icon-user"></i></a>
        </p>
    </footer>
    <link href="/static/nprogress/nprogress.min.css" rel="stylesheet">
    <script src="/static/nprogress/nprogress.min.js"></script>
    <script>
        // NProgress
        NProgress.start();
        NProgress.done();

        // 导航状态
        $('.nav-pills').find('a').each(function () {
            // console.log(document.location);
            if (this.pathname == document.location.pathname) {
                $(this).parent().addClass('active');
            }
        });

        // cookie 操作封装 https://www.jb51.net/article/94456.htm
        var cookieUtil = {
            // 设置cookie
            setItem: function (name, value, days) {
                var date = new Date();
                date.setDate(date.getDate() + days);
                document.cookie = name + '=' + value + ';expires=' + date + ';path=' + '/';
            },
            // 获取cookie
            getItem: function (name) {
                var arr = document.cookie.replace(/\s/g, "").split(';');
                for (var i = 0; i < arr.length; i++) {
                    var tempArr = arr[i].split('=');
                    if (tempArr[0] == name) {
                        return decodeURIComponent(tempArr[1]);
                    }
                }
                return '';
            },
            // 删除cookie
            removeItem: function (name) {
                this.setItem(name, '1', -1);
            },
            // 检查是否含有某cookie
            hasItem: function (name) {
                return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
            },
            // 获取全部的cookie列表
            getAllItems: function () {
                var cookieArr = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
                for (var nIdx = 0; nIdx < cookieArr.length; nIdx++) {
                    cookieArr[nIdx] = decodeURIComponent(cookieArr[nIdx]);
                }
                return cookieArr;
            }
        };

        // 暗黑操作
        let styleLabel = document.createElement('style');
        document.getElementById('dark').onclick = function () {
            if (cookieUtil.getItem('dark-mode') == null) {
                const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
                styleLabel.appendChild(document.createTextNode(style));
                document.head.appendChild(styleLabel);
                cookieUtil.setItem('dark-mode', 1, 1);
            } else {
                if (cookieUtil.getItem('dark-mode') == 1) {
                    document.head.removeChild(styleLabel);
                    cookieUtil.setItem('dark-mode', 0, 1);
                } else {
                    const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
                    styleLabel.appendChild(document.createTextNode(style));
                    document.head.appendChild(styleLabel);
                    cookieUtil.setItem('dark-mode', 1, 1);
                }
            }
        }

        if (cookieUtil.getItem('dark-mode') == 1) {
            const style = 'html{filter: invert(80%) hue-rotate(180deg);} img,video {filter: invert(100%) hue-rotate(180deg);}';
            styleLabel.appendChild(document.createTextNode(style));
            document.head.appendChild(styleLabel);
        }
        if (cookieUtil.getItem('dark-mode') == null) {
            document.head.removeChild(styleLabel);
        }

        // tips提示
        $('[data-toggle="tooltip"]').tooltip({
            tipClass: 'tooltip',
            placement: 'auto',
            html: true,
            delay: {
                show: 50,
                hide: 0.5
            }
        });

    </script>
</body>
</html>